<template>
    <view>
        <u-navbar title="主题" :background="background" back-icon-color="#efefef" title-color="#efefef"></u-navbar>
        <view class="wrap">
            <!-- 正文内容 -->
            <view>
                <view class="title">
                    {{forumTitle}}
                </view>
                <u-line color="black" />
            </view>
            <view v-for="item in commentList" :key="item.id">
                <view class="box">
                    <view class="user-info">
                        <view class="user-avatar">
                            <u-avatar :src="item.avatar" size="mini"></u-avatar>
                        </view>
                        <view class="user-name">
                            {{item.userName}}
                        </view>
                    </view>
                    <u-line color="black" />

                    <view class="main">
                        <view v-if="item.comment" class="before">
                            回复 @{{item.comment.userName}}  ({{item.comment.createTime}})
                            <u-parse :html="item.comment.content" :tag-style="mainstyle"></u-parse>
                        </view>
                        <view class="content">
                            <u-parse :html="item.content" :tag-style="mainstyle"></u-parse>
                        </view>
                        
                    </view>
                    <view class="time">
                        <u-line color="black" />
                        <view>
                            <view class="left" @click="reply(item.id)">
                                    <u-icon label="回复" label-color="#626768" size="40" name="/static/icon/reply.png"></u-icon>
                            </view>
                            <view class="right">
                                {{item.createTime}}
                            </view>
                        </view>
                    </view>


                </view>
            </view>
            <!-- <view class="box">
                <view class="user-info">
                    <view class="user-avatar">
                        <u-avatar src="/static/logo.png" size="mini"></u-avatar>
                    </view>
                    <view class="user-name">
                        leiyi
                    </view>
                </view>
                <u-line color="black" />

                <view class="main">
                    <u-parse :html="content" :tag-style="mainstyle"></u-parse>
                </view>
                <view class="time">
                    <u-line color="black" />
                    <view>
                        <view class="right">
                            2021.9.4 17:03
                        </view>
                    </view>
                </view>


            </view> -->

        </view>

        <view class="footer">
            <view class="icon" @click="reply(0)">
                <u-icon size="60" name="/static/icon/edit2.png"></u-icon>

            </view>
        </view>
    </view>
</template>

<script>
    import {
        getComments,
        getForumById,
        getForumComments,
    } from "../../../api/data.js"
    export default {

        data() {
            return {
                background: {
                    backgroundImage: 'linear-gradient(45deg, rgb(255, 40, 0), rgb(147, 0, 0))'
                },
                content: `
                					<p>露从今夜白，月是故乡明</p>
                					<img src="https://cdn.uviewui.com/uview/swiper/2.jpg" />`,
                mainstyle: {
                    p: 'font-size:32rpx;',
                    span: 'font-size: 30rpx',
                    img: 'padding: 20rpx 0'
                },
                forumId: 0,
                forumTitle: '',
                commentList: [],
                token: '',
            }
        },
        onLoad(options) {
             this.token = uni.getStorageSync('token')
            // console.log(options.title)
            this.forumId = options.id
            // this.forumTitle = options.title
        },
        onPullDownRefresh() {
            const _this=this
                console.log('refresh');
                setTimeout(function () {
                    _this.getForumTitle()
                    _this.getComments()
                    uni.stopPullDownRefresh();
                }, 500);
            },
        onShow() {
            this.getForumTitle()
            this.getComments()
        },
        methods: {
            getForumTitle(){
                const _this =this
                getForumById({
                    id : this.forumId
                }).then(function(res) {
                    // console.log(res)
                    _this.forumTitle = res.data.data.forumTitle
                })
            },
            getComments() {
                const _this = this
                getForumComments({
                    id: this.forumId,
                }).then(function(res) {
                    console.log(res.data)
                    _this.commentList = res.data.data
                })
            },
            reply(id){
                this.dontlogin()
                if(this.token!=''){
                uni.navigateTo({
                    //1为添加，2为回复
                    url: '/pages/forum/addposts/index?type=2&forumId='+this.forumId+'&articleId='+id
                })
                }
            },
            dontlogin() {
                if (this.token == '') {
                    uni.showModal({
                        title: '提示',
                        content: '您还未登录，请登录后再操作',
                        cancelText: '稍后再试',
                        success: function(res) {
                            if (res.confirm) {
                                uni.navigateTo({
                                    //1为添加，2为回复
                                    url: '/pages/login/index'
                                })
                            } else if (res.cancel) {
                                console.log('用户点击取消');
                            }
                        }
                    });
            
                }
            
            },
        }
    }
</script>

<style lang="scss" scoped>
    .wrap {
        display: flex;
        flex-direction: column;
        min-height: calc(100vh - var(--window-top) - var(--window-bottom));
        width: 100%;
        background-color: #fffaf0;
        // background-color: #fff9ee;
    }

    .title {
        padding: 20rpx 30rpx;
        font-size: 45rpx;
        letter-spacing: 2rpx;
    }

    .box {
        // background: #fff;
        border: 3rpx solid #949494;
        border-radius: 10rpx;

        .user-info {
            padding: 20rpx;

        }

        .user-avatar {
            display: inline-block;
            vertical-align: middle;
        }

        .user-name {
            display: inline-block;
            font-size: 32rpx;
            // vertical-align: middle;
            padding: 10rpx;
            vertical-align: middle;
            color: #535353;


        }

    }

    .main {
        padding: 20rpx;
        .content {
            
            min-height: 200rpx;
            
        }
        
    }

    .time {
        // position: absolute;
        height: 60rpx;
        // right: 0px;
        color: #808080;
        
    }
    .right {
        position: absolute;
         right: 0px;
         padding: 10rpx 20rpx;
    }
    .left {
        position: absolute;
         left: 0px;
         padding: 10rpx 20rpx;
    }
    .footer {
        // color: #fff;
        // line-height: 100rpx;
        // flex: 0 0 100rpx;
        /* 不放大不缩小固定100rpx */
        // height: 100rpx;
        position: fixed;
        right: 50rpx;
        bottom: 50rpx;
        // width: 10%;
        z-index: 9999;
        // padding: 50rpx;
        width: 100rpx;
        height: 100rpx;
        opacity: 0.7;
        text-align: left;
        border: 2rpx solid #eeeeee;
        border-radius: 50rpx;
        background-color: #3c3c3c;

        // color: #888888;
        .icon {
            padding: 17rpx 0 13rpx 20rpx;
            // margin: 0 auto;
        }


    }
    .before {
        padding: 10rpx 30rpx;
        border: 2rpx solid #eeeeee;
        background-color: #bdbdbd;
        border-radius: 10rpx;
        margin-bottom: 20rpx;
        
    }
</style>
